M

MLOG

Türkçe

Next.js API Rotalarını keşfedin ve React uygulamalarınızda tam yığın geliştirme yeteneklerinin kilidini açın. Desenleri, en iyi uygulamaları ve dağıtım stratejilerini öğrenin.

Next.js API Rotaları: Tam Yığın Geliştirme Desenleri

Next.js, yüksek performanslı ve ölçeklenebilir web uygulamaları oluşturmak için sağlam bir çerçeve sağlayarak React geliştirmesinde devrim yarattı. Temel özelliklerinden biri, geliştiricilerin doğrudan Next.js projelerinde arka uç işlevselliği oluşturmalarını sağlayan API Rotalarıdır. Bu yaklaşım geliştirmeyi kolaylaştırır, dağıtımı basitleştirir ve güçlü tam yığın yeteneklerinin kilidini açar.

Next.js API Rotaları Nelerdir?

Next.js API Rotaları, doğrudan /pages/api dizininizde yazılan sunucusuz işlevlerdir. Bu dizindeki her dosya bir API uç noktası haline gelir ve HTTP isteklerini otomatik olarak ilgili işlevine yönlendirir. Bu, ayrı bir arka uç sunucusuna olan ihtiyacı ortadan kaldırır, uygulama mimarinizi basitleştirir ve operasyonel yükü azaltır.

Bunları Next.js uygulamanızın içinde yaşayan minyatür sunucusuz işlevler olarak düşünün. GET, POST, PUT, DELETE gibi HTTP isteklerine yanıt verirler ve veritabanları, harici API'ler ve diğer sunucu tarafı kaynaklarıyla etkileşim kurabilirler. En önemlisi, kullanıcı tarayıcısında değil, yalnızca sunucuda çalışırlar ve API anahtarları gibi hassas verilerin güvenliğini sağlarlar.

API Rotalarının Temel Avantajları

API Rotalarıyla Başlarken

Next.js'de bir API rotası oluşturmak basittir. Basitçe /pages/api dizini içinde yeni bir dosya oluşturun. Dosya adı, rotanın yolunu belirleyecektir. Örneğin, /pages/api/hello.js adlı bir dosya oluşturmak, /api/hello adresinden erişilebilen bir API uç noktası oluşturacaktır.

Örnek: Basit Bir Selamlama API'si

İşte bir JSON yanıtı döndüren bir API rotasının temel bir örneği:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API Route!' });
}

Bu kod, iki argüman alan eşzamansız bir handler işlevi tanımlar:

İşlev, HTTP durum kodunu 200 (Tamam) olarak ayarlar ve bir mesaj içeren bir JSON yanıtı döndürür.

Farklı HTTP Yöntemlerini İşleme

req.method özelliğini kontrol ederek API rotanız içinde farklı HTTP yöntemlerini (GET, POST, PUT, DELETE, vb.) işleyebilirsiniz. Bu, RESTful API'leri kolaylıkla oluşturmanıza olanak tanır.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Veritabanından tüm yapılacakları getirin
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Yeni bir yapılacak oluşturun
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Desteklenmeyen yöntemleri işleyin
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

Bu örnek, varsayımsal bir /api/todos uç noktası için GET ve POST isteklerinin nasıl işleneceğini gösterir. Ayrıca, desteklenmeyen yöntemler için hata işlemeyi de içerir.

API Rotalarıyla Tam Yığın Geliştirme Desenleri

Next.js API Rotaları, çeşitli tam yığın geliştirme desenlerini etkinleştirir. İşte bazı yaygın kullanım durumları:

1. Veri Getirme ve Manipülasyon

API Rotaları, veritabanlarından, harici API'lerden veya diğer veri kaynaklarından veri getirmek için kullanılabilir. Ayrıca, kayıt oluşturma, güncelleme veya silme gibi verileri manipüle etmek için de kullanılabilirler.

Örnek: Veritabanından Kullanıcı Verilerini Getirme


// pages/api/users/[id].js
import { query } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'User not found' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

Bu örnek, URL'de sağlanan kullanıcı kimliğine göre bir veritabanından kullanıcı verilerini getirir. Veritabanıyla etkileşim kurmak için bir veritabanı sorgu kitaplığı (lib/db içinde olduğu varsayılır) kullanır. SQL enjeksiyonu güvenlik açıklarını önlemek için parametrelendirilmiş sorguların kullanımına dikkat edin.

2. Kimlik Doğrulama ve Yetkilendirme

API Rotaları, kimlik doğrulama ve yetkilendirme mantığını uygulamak için kullanılabilir. Kullanıcı kimlik bilgilerini doğrulamak, JWT belirteçleri oluşturmak ve hassas kaynakları korumak için bunları kullanabilirsiniz.

Örnek: Kullanıcı Kimlik Doğrulaması


// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

Bu örnek, sağlanan parolayı veritabanında depolanan karma parolayla karşılaştırarak kullanıcıların kimliğini doğrular. Kimlik bilgileri geçerliyse, bir JWT belirteci oluşturur ve istemciye döndürür. İstemci daha sonra bu belirteci sonraki isteklerin kimliğini doğrulamak için kullanabilir.

3. Form İşleme ve Veri Gönderme

API Rotaları, form gönderimlerini işlemek ve istemciden gönderilen verileri işlemek için kullanılabilir. Bu, iletişim formları, kayıt formları ve diğer etkileşimli öğeler oluşturmak için kullanışlıdır.

Örnek: İletişim Formu Gönderimi


// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'New Contact Form Submission',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
      });

      res.status(200).json({ message: 'Email sent successfully' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Failed to send email' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

Bu örnek, yöneticiye bir e-posta göndererek bir iletişim formu gönderimini işler. E-postayı göndermek için bir e-posta gönderme kitaplığı (lib/email içinde olduğu varsayılır) kullanır. admin@example.com adresini gerçek alıcı e-posta adresiyle değiştirmelisiniz.

4. Web Kancaları ve Etkinlik İşleme

API Rotaları, web kancalarını işlemek ve harici hizmetlerden gelen olaylara yanıt vermek için kullanılabilir. Bu, Next.js uygulamanızı diğer platformlarla entegre etmenize ve görevleri otomatikleştirmenize olanak tanır.

Örnek: Bir Stripe Web Kancasını İşleme


// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // Varsayılan gövde ayrıştırmayı devre dışı bırakın
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`Webhook Error: ${err.message}`);
      res.status(400).send(`Webhook Error: ${err.message}`);
      return;
    }

    // Olayı işleyin
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
        // Ardından, başarılı ödeme amacını işlemek için bir yöntem tanımlayın ve çağırın.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Ardından, bir Ödeme Yönteminin başarılı bir şekilde eklenmesini işlemek için bir yöntem tanımlayın ve çağırın.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Beklenmeyen olay türü
        console.log(`Unhandled event type ${event.type}.`);
    }

    // Olayın alındığını onaylamak için 200 yanıtı döndürün
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Bu örnek, imzayı doğrulayarak ve olay verilerini işleyerek bir Stripe web kancasını işler. Varsayılan gövde ayrıştırıcıyı devre dışı bırakır ve ham istek gövdesini okumak için özel bir arabellek işlevi kullanır. Stripe, imza doğrulaması için ham gövdeyi gerektirdiğinden, varsayılan gövde ayrıştırıcıyı devre dışı bırakmak çok önemlidir. Stripe panonuzda Stripe web kancası uç noktanızı yapılandırmayı ve STRIPE_WEBHOOK_SECRET ortam değişkenini ayarlamayı unutmayın.

API Rotaları için En İyi Uygulamalar

API Rotalarınızın kalitesini ve sürdürülebilirliğini sağlamak için şu en iyi uygulamaları izleyin:

1. Kodunuzu Modülerleştirin

Büyük, monolitik API rotaları yazmaktan kaçının. Bunun yerine, kodunuzu daha küçük, yeniden kullanılabilir modüllere ayırın. Bu, kodunuzu anlamayı, test etmeyi ve sürdürmeyi kolaylaştırır.

2. Hata İşleme Uygulayın

API rotalarınızdaki hataları düzgün bir şekilde işleyin. İstisnaları yakalamak ve istemciye uygun hata yanıtları döndürmek için try...catch bloklarını kullanın. Hata ayıklama ve izlemeye yardımcı olmak için hataları günlüğe kaydedin.

3. Giriş Verilerini Doğrulayın

Güvenlik açıklarını önlemek ve veri bütünlüğünü sağlamak için istemciden gelen giriş verilerini her zaman doğrulayın. Doğrulama şemaları tanımlamak ve veri kısıtlamalarını zorlamak için Joi veya Yup gibi doğrulama kitaplıklarını kullanın.

4. Hassas Verileri Koruyun

API anahtarları ve veritabanı kimlik bilgileri gibi hassas verileri ortam değişkenlerinde depolayın. Hassas verileri asla kod deponuza kaydetmeyin.

5. Oran Sınırlaması Uygulayın

API rotalarınızı kötüye kullanıma karşı korumak için oran sınırlaması uygulayın. Bu, bir istemcinin belirli bir süre içinde yapabileceği istek sayısını sınırlar. express-rate-limit veya limiter gibi oran sınırlama kitaplıklarını kullanın.

6. API Anahtarlarını Güvenli Hale Getirin

API anahtarlarını doğrudan istemci tarafı kodunda açığa çıkarmayın. API anahtarlarınızı yetkisiz erişimden korumak için istekleri her zaman API rotalarınız aracılığıyla proxy yapın. API anahtarlarını sunucunuzdaki ortam değişkenlerinde güvenli bir şekilde saklayın.

7. Ortam Değişkenlerini Kullanın

Kodunuzdaki yapılandırma değerlerini sabit kodlamaktan kaçının. Bunun yerine, yapılandırma ayarlarını depolamak için ortam değişkenlerini kullanın. Bu, uygulamanızı farklı ortamlarda (geliştirme, hazırlama, üretim) yönetmeyi kolaylaştırır.

8. Günlüğe Kaydetme ve İzleme

API rotalarınızın performansını izlemek için günlüğe kaydetme ve izleme uygulayın. Hatalar, uyarılar ve başarılı istekler gibi önemli olayları günlüğe kaydedin. İstek gecikmesi, hata oranları ve kaynak kullanımı gibi metrikleri izlemek için izleme araçlarını kullanın. Sentry, Datadog veya New Relic gibi hizmetler yardımcı olabilir.

Dağıtım Hususları

Next.js API Rotaları, sunucusuz platformlarda dağıtılmak üzere tasarlanmıştır. Popüler dağıtım seçenekleri şunlardır:

API Rotalarıyla Next.js uygulamanızı dağıtırken, ortam değişkenlerinizin dağıtım platformunda düzgün şekilde yapılandırıldığından emin olun. Ayrıca, API rotalarınızın ilk yanıt süresini etkileyebilecek sunucusuz işlevlerin soğuk başlatma süresini de göz önünde bulundurun. Kodunuzu optimize etmek ve sağlanan eşzamanlılık gibi teknikleri kullanmak, soğuk başlatma sorunlarını azaltmaya yardımcı olabilir.

Sonuç

Next.js API Rotaları, React ile tam yığın uygulamalar oluşturmanın güçlü ve kullanışlı bir yolunu sunar. Sunucusuz işlevlerden yararlanarak geliştirmeyi basitleştirebilir, operasyonel yükü azaltabilir ve uygulama performansını iyileştirebilirsiniz. Bu makalede özetlenen en iyi uygulamaları izleyerek, Next.js uygulamalarınıza güç veren sağlam ve bakımı kolay API Rotaları oluşturabilirsiniz.

İster basit bir iletişim formu, ister karmaşık bir e-ticaret platformu oluşturuyor olun, Next.js API Rotaları geliştirme sürecinizi kolaylaştırmanıza ve olağanüstü kullanıcı deneyimleri sunmanıza yardımcı olabilir.

Daha Fazla Bilgi